ตั้งเป็นหน้าแรก  
Bookmark and Share  
  หน้าแรก | ประกาศสินค้า | วิทยุออนไลน์ | เกมส์ | หาเพื่อน | ดูทีวีออนไลน์ | บันเทิง | บทความดีๆ | ไอที | สาระน่ารู้ | สารบัญเว็บไซต์ | ติดต่อลงโฆษณา  
     อุปกรณ์สื่อสาร   คอมพิวเตอร์   กีฬา   บ้านและที่ดิน   เกมส์และของเล่น   เบ็ดเตล็ด   ของสะสม 
     ประกาศ    ดนตรี   ยานพาหนะ   เครื่องใช้ไฟฟ้า   สัตว์เลี้ยงและต้นไม้   เครื่องแต่งกาย   
     อุปกรณ์ถ่ายภาพ    อุตสาหกรรม   หนังสือและเครื่องเขียน   งานและการศึกษา   อาหารและสุขภาพ   อุปกรณ์สำนักงาน   
   หน้าแรกหมวดคอมพิวเตอร์และเทคโนโลยี » [How to]การทำภาพเคลื่อนไหว (GIF animation)อย่างง่าย ด้วย PhotoShopและImageReady
 

[How to]การทำภาพเคลื่อนไหว (GIF animation)อย่างง่าย ด้วย PhotoShopและImageReady
ส่งบทความนี้ต่อ
พิมพ์หน้านี้


แบ่ง ออกเป็นสอนขั้นตอนใหญ่ๆ ก็คือ การเตรียมเฟรมภาพที่จะใช้ และการนำภาพที่ได้ไปทำให้มันเคลื่อนไหวโดยใช้โปรแกรม ImageReady(มันแถมมากับ PhotoShop อยู่แล้วแหละ)

[Step 1] วางแผนและตระเตรียมเฟรมภาพต่างๆใน PhotoShop

ขอเล่าเป็นเรื่องเป็นราวเลยก็แล้วกันนะครับ - - เพราะแต่ละคนจะมีวีธีทำไม่เหมือนกัน

สำหรับงานนี้ผมต้องการภาพหนูอาวี่ทำตากระพริบปริบๆ เป็นวิธีการทำภาพเคลื่อนไหวที่ง่ายที่สุดแล้วมั้ง - -

เริ่มแรกผมจึงวาดภาพหนูอาวี่ขณะลืมตา และ หลับตา (ด้วยความขี้เกียจ อย่างหลังจึงวาดแต่ตา)

เปิดภาพที่ว่าใน PhotoShop



จัดการลงสีให้เรียบร้อย(ไม่ลงก็ได้ ตามสะดวก) ภาพได้จะใช้เป็นเฟรมตอนลืมตา

จากนั้นก็ทำการก๊อปปี้ภาพนี้ขึ้นมาอีก 1 เลเยอร์(ลากไปปล่อยตามลูกศรสีแดง) เพื่อทำการตกแต่งสำหรับใช้เป็นเฟรมหลับตา



ใช้เครื่องมือ Clon Stamp เนียนลบลูกตาออก (เป็นผีไม่มีตาชั่วคราว =[]=) วิธีใช้งานคือ กด Alt ค้างไว้แล้วไปคลิกที่สีผิว (กากบาท)

แล้วไปคลิกเพื่อลบลูกตาออกได้เลย (กว่าจะเสร็จก็คลิกไปหลายทีเหมือนกัน)



ใช้ Marquee Tool(1) ทำการเลือก (จะเรียกว่าครอบก็ได้ ^^) กด Ctrl+C และ Ctrl+V เพื่อก๊อปภาพตา(ตอนหลับตา)ไปยังเลเยอร์ใหม่

แล้ว ใช้ Move Tool(2) ลากไปวางบนหน้า สุดท้ายก็ปรับ Layer Mode(3) ให้เป็น Multiply เพื่อให้ส่วนที่เป็นสีขาวโปร่งใส(แบบว่าขี้เกียจลบ - -)

(สำหรับขั้นตอนนี้ใครอาจจะเขียนภาพตา(ตอนหลับตา)ลงไปเลยก็ได้ ไม่ต้องก๊อปให้เสียเวลา ^^)



จัดวางตำแหน่ง ตกแต่ง และทำการ Crop ให้เรียบร้อย โดยการใช้ Marquee Tool เจ้าเก่า

ครอบบริเวณภาพที่ต้องการ (สามารถกดปุ่ม Shift ค้างไว้เพื่อให้เป็นรูปสี่เหลี่ยมจัตตุรัส)

แล้วไปที่เมนู Image>>Crop เป็นอันเสร็จสิ้นการ Crop



สุดท้ายเราจะได้ 2 เฟรม คือ ลืมตา และหลับตา

(บางคนอาจได้หลายเฟรม) โดยเราจะใช้การเปิดปิดการแสดงผลของเลเยอร์(รูปลูกตา)(ลองทดสอบดูได้)

เพื่อให้ได้เฟรมตามต้องการ เมื่อพร้อมทุกเฟรมแล้วเราก็พร้อมที่จะผลงานของเราต่อไปยังโปรแกรม Image Ready






[Step 2] กำกับการเคลื่อนไหวใน ImageReady

หากใครยังค้างอยู่ใน PhotoShop ก็สามารถส่งงานไปยัง ImageReady ได้ง่ายๆโดยกดปุ่ม Edit in ImageReady



ยินดีต้อนรับพี่น้องทุกท่านสู่ ImageReady เพื่อความปลอดภัยกรุณาเลือกวงแดงทางด้านซ้ายเป็น Optimize

เพราะจะได้แสดงภาพงานเราหลังจากเซฟไปแล้วจริงๆ (สามารถปรับแต่งเพิ่มเติมได้ที่วงแดงทางด้านขวา)

เป็นอันเสร็จสิ้นการเตรียมตัว (นี่เพิ่งเตรียมเรอะ =[]=')



ขั้นแรก ไปควบคุมการแสดงผลของเลเยอร์(ปกติอยู่ขวาล่างสุด) ให้แสดงภาพหนูอาวี่ตอนลืมตา

เป็นอันเสร็จสิ้นเฟรมแรก คลิกปุ่ม Duplicates Current Frame (2) เพื่อเริ่มการตั้งค่าที่เฟรมต่อไป

(ที่แท็บ Animation จะปรากฎเฟรมใหม่ขึ้นมา)



ที่เฟรมใหม่นี้เราก็ตั้งค่าการแสดงผลเลเยอร์ให้เฟรมนี้เป็นเฟรมหลับตา



ใต้เฟรมแต่ละเฟรมเริ่มต้นจะมีคำว่า 0 Sec (0 วินาที) อยู่ นี่คือเวลาในการแสดงผลของแต่ละเฟรม(ค้างกี่วิ)

เราสามาถคลิกที่นี่เพื่อเลือกเวลาที่ต้องการได้ (Other.. ถ้าพี่น้องต้องการกรอกเอง)



ทีนี้ผมก็สร้างเฟรมต่างๆขึ้นมาและปรับเวลาตามภาพ

ตามบทที่วางไว้ว่า กระพริบตาหนึ่งครั้ง ค้าง และกระพริบถี่ๆอีกสองครั้ง (แล้วเริ่มใหม่)

ลองกดปุ่ม play ในวงแดง เพื่อทดลองเล่นภาพเคลื่อนไหวดูได้ (อย่าถามว่าหยุดยังไง ^^')



เมื่อพอใจแล้ว พี่น้องสามารถย่อ/ขยายภาพได้ที่ Image>>Image Size... (50x50 สำหรับอิโมชั่นใน msn)

และทำการเซฟได้ที่ File>>Save Optimize As.. (ใครตั้งชื่อภาษาไทยจะมีการเตือนนิดหน่อยไม่ต้องไปสนใจมัน)

เอาเป็นว่าไปดูผลงานกันดีกว่า ^^




สำหรับใครที่อยากแอดวานซ์มากก่านี้ ลองเปิดภาพ gif animation จากที่ต่างๆโดยใช้ ImageReady ดูแล้วกันนะครับ

จะช่วยให้เข้าใจมากขึ้น

วันนี้ผมแนะนำได้แค่นี้ สวัสดีครับ

ปล.สงสัยตรงไหนถามได้นะครับ ^^


_/|\_ ขอบคุณบทความดีๆจาก http://dadeemodify.exteen.com/
 

บทความอื่นๆในหมวด
• การทำตัวหนังสือเรืองแสงจาก Photoshop
• สร้างรูปตัวเองเป็นรูปการ์ตูนเจ๋งๆๆ
• วิธีเสียบปลั๊ก Notebook ที่ถูกต้อง
• เปิดเพลงผ่าน winamp แล้วมีเนื้อร้องขึ้นมาให้ร้องเพลงตามไปด้วย
• เปลี่ยนหน้าตา icon บน desktop ง่ายนิดเดียว
• โค้ดลบโฆษณาในhi5 - Disable Ads Hi5
• เปิดไฟล์ที่มากจาก Microsoft Office 2007 ด้วย Microsoft Office 2003
• แก้ไวรัส ดับเบิ้ลคลิกที่ Drive จะเปิดขึ้นมาในหน้าจอใหม่, Show Hidden File ไม่ได้
• วิธีหยุดการรบกวน แก้ไวรัส MSN
• 8 อาการบอกเหตุคอมพิวเตอร์ติด Spyware
» บทความในหมวดทั้งหมด

Tag
ชอร์ตคัต  คอมพิวเตอร์  ไวรัส  firefox  password  photoshop  แชร์ไฟล์  gmail  MSN  winamp  Green Bangkok Wi-fi  copy  netbook  เน็ตบุ๊ก  แชร์  notebook  คอมพิวเตอร์  photoshop  ตัวหนังสือเรืองแสง  pdf  msn  Photoshop  icon  photoshop  lomo  Microsoft Office 2007  อินเตอร์เน็ต  Photoshop  msn  คอมพิวเตอร์  โฟลเดอร์  Show Hidden File  ImageReady  ลดขนาดภาพ gif  msn  Spyware  คอมพิวเตอร์  youtube  วิดีโอ    
บทความที่เกี่ยวข้อง
ส ร้ า ง รู ป น อ ก ก ร อ บ กั บ p h o t o s h o p กั น
วันนี้บีเอาเทคนิคการทำ รูปนอกกรอบมาฝากครับ ง่าย ๆ และสวยงามตามคอนเซ็ปต์ “ง่าย ๆ จนยายงง” เหมือนเดิมครับ ถ้าใครไม่รู้ว่ารูปนอกกรอบนี่มันยังไง จะเหมือน
การทำตัวหนังสือเรืองแสงจาก Photoshop
หลังจากงมโข่งอยู่นาน ก็ได้งานง่าย ๆ แต่สวยถูกใจมาอันนึงครับ ลงเล่นกันดูนะครับ สวยแล้วก็สนุกดีด้วยครับ
การสร้างภาพสุดเก๋จากตัวหนังสือ Photoshop
วันนี้ ไปเจอเทคนิคนึงจาก เว็บไซท์ฝรั่งมาล่ะ เค้าสร้างภาพสวย ๆ แบบง่าย ๆ จากตัวหนังสือล่ะ เท่โคตรอ่ะ เห็นแล้วอดคันไม้คันมือไม่ไหว เลยแปลมาฝากกันครับ
Action เจ๋งๆของ Photoshop
Action เจ๋งๆของ Photoshop มาฝากครรับ
  แสดงความคิดเห็น
โปรดอ่านกฎกติกาก่อนแสดงความคิดเห็น
1. โปรดงดเว้น การใช้คำหยาบคาย ส่อเสียด ดูหมิ่น กล่าวหาให้ร้าย สร้างความแตกแยก หรือกระทบถึงสถาบันอันเป็นที่เคารพ
2. ทุกความคิดเห็นไม่เกี่ยวข้องกับผู้ดำเนินการเว็บไซต์ และไม่สามารถนำไปอ้างอิงทางกฎหมายได้
3. ทีมงานเว็บมาสเตอร์ขอสงวนสิทธิ์ในการลบความคิดเห็น โดยไม่ต้องชี้แจงเหตุผลใดๆ ต่อเจ้าของความคิดเห็นนั้น
 

แสดงความคิดเห็นของท่านได้ที่นี่
ความคิดเห็น :
*
ชื่อ/Email :
    คลิกเพื่อขอรหัสโค๊ดใหม่
รหัสยืนยัน :
 

Search Engine Bot Detect : บอทยังไม่ได้มาเก็บข้อมูล